
<template>
  <div class="play1 base-background-img">
    <ul class="ul-item-content">
      <li class="li-item-content" v-for='(item, index) in tabs' :key="index" :class="{'active': item.isSelected}" @click="swiper(item)">
        <img :src="item.img" alt="">
      </li>
    </ul>
    <c-pdf @closePdf="closePdf" v-if="isshowpdf" :info="info" :infourl="pdfurl"></c-pdf>
  </div>
</template>

<script>
  import STATICPATH from '../../config.js'
  export default {
    name: 'play5',
    data () {
      return {
        isshowpdf: false,
        ishsowvideo: false,
        info: '',
        infourl: '',
        tabs: [{
          img: 'static/hohoplay/5/1.png',
          url: 'static/hohoplay/pdf/5/课件 - 橡皮筋动力车.pdf',
          data: [{
            isSelected: 1,
            name: '橡皮筋动力车1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-01/橡皮筋动力车1.mp4'
          }, {
            isSelected: 0,
            name: '橡皮筋动力车2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-01/橡皮筋动力车2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/2.png',
          url: 'static/hohoplay/pdf/5/课件 - 双轨怪坡.pdf',
          data: [{
            isSelected: 1,
            name: '双轨怪坡1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-02/双轨怪坡1.mp4'
          }, {
            isSelected: 0,
            name: '重心3',
            url: STATICPATH + '/hohoplay/video/5/K-L5-02/重心3.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/3.png',
          url: 'static/hohoplay/pdf/5/课件 - 魔幻神灯.pdf',
          data: [{
            isSelected: 1,
            name: '魔幻神灯',
            url: STATICPATH + '/hohoplay/video/5/K-L5-03/魔幻神灯.mp4'
          }, {
            isSelected: 0,
            name: '魔幻神灯2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-03/魔幻神灯2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/4.png',
          url: 'static/hohoplay/pdf/5/课件 - 万花筒.pdf',
          data: [{
            isSelected: 1,
            name: '万花筒',
            url: STATICPATH + '/hohoplay/video/5/K-L5-04/万花筒.mp4'
          }, {
            isSelected: 0,
            name: '万花筒2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-04/万花筒2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/5.png',
          url: 'static/hohoplay/pdf/5/课件 - 木筏帆船.pdf',
          data: [{
            isSelected: 1,
            name: '木筏帆船',
            url: STATICPATH + '/hohoplay/video/5/K-L5-05/木筏帆船.mp4'
          }, {
            isSelected: 0,
            name: '白努力效应2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-05/白努力效应2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/6.png',
          url: 'static/hohoplay/pdf/5/课件 - 表面张力.pdf',
          data: [{
            isSelected: 1,
            name: '表面张力1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-06/表面张力1.mp4'
          },
          {
            isSelected: 0,
            name: '表面张力2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-06/表面张力2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/7.png',
          url: 'static/hohoplay/pdf/5/课件 - 百变空间.pdf',
          data: [{
            isSelected: 1,
            name: '百变空间1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-07/百变空间1.mp4'
          }, {
            isSelected: 0,
            name: '百变空间2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-07/百变空间2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/8.png',
          url: 'static/hohoplay/pdf/5/课件 - 火山爆发.pdf',
          data: [{
            isSelected: 1,
            name: '火山爆发1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-08/火山爆发1.mp4'
          }, {
            isSelected: 0,
            name: '火山爆发2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-08/火山爆发2.mp4'
          }, {
            isSelected: 0,
            name: '火山爆发3',
            url: STATICPATH + '/hohoplay/video/5/K-L5-08/火山爆发3.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/9.png',
          url: 'static/hohoplay/pdf/5/课件 - 机械手.pdf',
          data: [{
            isSelected: 1,
            name: '机械手1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-09/机械手1.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/10.png',
          url: 'static/hohoplay/pdf/5/课件 - 水的浮力.pdf',
          data: [{
            isSelected: 1,
            name: '水的浮力1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-10/水的浮力1.mp4'
          }, {
            isSelected: 0,
            name: '水的浮力2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-10/水的浮力2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/11.png',
          url: 'static/hohoplay/pdf/5/课件 - 动物世界.pdf',
          data: [{
            isSelected: 1,
            name: '动物世界1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-11/动物世界1.mp4'
          }, {
            isSelected: 0,
            name: '什么是食物链',
            url: STATICPATH + '/hohoplay/video/5/K-L5-11/什么是食物链.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/12.png',
          url: 'static/hohoplay/pdf/5/课件 - 小小考古师.pdf',
          data: [{
            isSelected: 1,
            name: '小小考古师1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-12/小小考古师1.mp4'
          }, {
            isSelected: 0,
            name: '小小考古师2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-12/小小考古师2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/13.png',
          url: 'static/hohoplay/pdf/5/课件 - 旋转的纸杯.pdf',
          data: [{
            isSelected: 1,
            name: '旋转纸杯',
            url: STATICPATH + '/hohoplay/video/5/K-L5-13/旋转纸杯.mp4'
          }, {
            isSelected: 0,
            name: '旋转纸杯2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-13/旋转纸杯2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/14.png',
          url: 'static/hohoplay/pdf/5/课件 - 单翼滑翔机.pdf',
          data: [{
            isSelected: 1,
            name: '人力起飞3',
            url: STATICPATH + '/hohoplay/video/5/K-L5-14/01人力起飞3.mp4'
          }, {
            isSelected: 0,
            name: '电力滑翔机3',
            url: STATICPATH + '/hohoplay/video/5/K-L5-14/02电力滑翔机3.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/15.png',
          url: 'static/hohoplay/pdf/5/课件 - 气球鼓.pdf',
          data: [{
            isSelected: 1,
            name: '气球鼓1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-15/气球鼓1.mp4'
          }, {
            isSelected: 0,
            name: '气球鼓2',
            url: STATICPATH + '/hohoplay/video/5/K-L5-15/气球鼓2.mp4'
          }]
        },
        {
          img: 'static/hohoplay/5/16.png',
          url: 'static/hohoplay/pdf/5/课件 - 小路灯.pdf',
          data: [{
            isSelected: 1,
            name: '小路灯1',
            url: STATICPATH + '/hohoplay/video/5/K-L5-16/小路灯1.mp4'
          }]
        }]
      }
    },
    methods: {
      swiper: function (item) {
        console.log(item)
        this.info = item.data
        this.pdfurl = item.url
        this.isshowpdf = true
      },
      closePdf: function () {
        this.isshowpdf = false
      }
    }
  }
</script>

<style scoped>
.play1 > div {
  position: absolute; 
}
.ul-item-content {
  margin: 0;
  padding: 0;
  list-style-type: none;
  z-index: 10;
  top: 230px;
  left: 190px;
  width: 910px;
  height: 35px;
  position: absolute;
}
.li-item-content {
  cursor: pointer;
  float: left;
  margin: 15px 9px;
  position: initial;
}
</style>
